<template>
	<div style="width: 280px; height: 100vh; padding: 20px; background: #FFFFFF; overflow: auto;">
    <div class="flexbc" style="margin-bottom: 20px;">
      <div><el-input  placeholder="输入关键字进行过滤"  v-model="filterText" size="small"></el-input></div>
      <div>
        <el-dropdown @command="handleCommand">
          <div style="background: #005AFF; color: #fff; line-height: 32px; width: 32px; text-align: center; border-radius: 5px; cursor: pointer; font-size: 20px; font-weight: bold;">+</div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="addzuzhi" >新建组织</el-dropdown-item>
            <el-dropdown-item command="addshebei" >新建设备</el-dropdown-item>
            <el-dropdown-item command="dingyizu">定义组管理</el-dropdown-item>
            <el-dropdown-item command="tuku">图库管理</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <el-tree  class="filter-tree" @node-click="handleNodeClick" @node-contextmenu="openMenu" :data="data"  :props="defaultProps" node-key="treeId"
  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand"  @node-collapse="handleNodeCollapse" :filter-node-method="filterNode"  ref="tree"></el-tree>
      <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >

        <div class="li" @click="shanchuzuzhi()" v-if="youjiandangqian.type == 0">删除组织</div>

        <div class="li" @click="addshebei(1)" v-if="youjiandangqian.type == 0">新建设备</div>
        <div class="li" @click="shanchushebei()" v-if="youjiandangqian.type == 1">删除设备</div>

        <div class="li" @click="addcedian(21)" v-if="youjiandangqian.type == 1">新增动态量测点</div>
        <div class="li" @click="addcedian(22)" v-if="youjiandangqian.type == 1">新增转速量测点</div>
        <div class="li" @click="addcedian(23)" v-if="youjiandangqian.type == 1">新增工艺量测点</div>
        <div class="li" @click="shanchucedian()" v-if="youjiandangqian.type == 21">删除动态量测点</div>
        <div class="li" @click="shanchucedian()" v-if="youjiandangqian.type == 22">删除转速量测点</div>
        <div class="li" @click="shanchucedian()" v-if="youjiandangqian.type == 23">删除工艺量测点</div>
        <!-- <div class="li">定义组管理</div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import { gettree,removedian,removeorg,removedev } from '@/api/xitong'
	export default {
		name: 'left',
		data() {
			return {
        filterText:"",
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuVisible: false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[]
			}
		},
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    beforeDestroy() {
      this.$store.commit('changeshowwho',"")
    },
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {
      //删除测点
      shanchucedian:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removedian(this.youjiandangqian.value).then(response => {
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },
      //删除组织
      shanchuzuzhi:function(){
        console.log(this.youjiandangqian)
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeorg(this.youjiandangqian.value).then(response => {
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },
      //删除设备
      shanchushebei:function(){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removedev(this.youjiandangqian.value).then(response => {
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },
      //添加组织
      addzuzhi:function(){
        this.$store.commit('changeshowwho',"")
        this.$nextTick(()=>{
          let obj = {
            type:0,
            what:'add'
          }
          this.$store.commit('changeshowwho',obj)
        })
      },
      //添加设备
      addshebei:function(type){
        this.$store.commit('changeshowwho',"")
        this.$nextTick(()=>{
          let obj = {
            zuzhiid:this.youjiandangqian.value,
            zuzhiname:this.youjiandangqian.label,
            type:1,
            what:'add'
          }
          this.$store.commit('changeshowwho',obj)
        })
      },
      //添加测点
      addcedian:function(type){
        this.$store.commit('changeshowwho',"")
        this.$nextTick(()=>{
          let obj = {
            shebeiid:this.youjiandangqian.value,
            shebeiname:this.youjiandangqian.label,
            type:type,
            what:'add'
          }
          this.$store.commit('changeshowwho',obj)
        })
      },
      //右键点击
      handleCommand:function(val){
        this.youjiandangqian = ''
        switch (val){
          case 'addzuzhi':
            this.addzuzhi()
            break;
          case 'addshebei':
            this.addshebei()
            break;
          case 'dingyizu':
            this.$router.push('/xitong/dingyizu')
            break;
          case 'tuku':
            this.$router.push('/xitong/tuku')
            break;
        }
      },
      //打开右键弹框
      openMenu(event, data, node, element) {
        //右键临时赋值
        this.youjiandangqian = data

        this.menuPosition.x = event.clientX;
        this.menuPosition.y = event.clientY;
        this.menuVisible = true;
        event.preventDefault(); 

        document.addEventListener('click', this.closeMenu);
      },
      //关闭
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },
      //打开树
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      //折叠树
      handleNodeCollapse(data, node, instance) {
        // 当节点折叠时，将节点的 key 从 expandedKeys 数组中移除
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
        console.log(this.zhankaiarray)
      },
      handleNodeClick(data) {
        this.menuVisible = false;
        this.$store.commit('changeshowwho',"")
        this.$nextTick(()=>{
          this.$store.commit('changeshowwho',data)
          console.log(this.$store.state.showwho)
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      //获取树
      getlist:function(){
        gettree().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">
  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
